<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 引入react核心库 -->
    <script src="./node_modules/react/umd/react.development.js"></script>
    <!-- 引入react-dom 支持react操作dom -->
    <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
  </head>
  <body>
    <!-- 使用react实现结果 -->
    <!-- <ul class="ul">
    <h2 class="h2">名单</h2>
    <li>张三</li>
    <li>李四</li>
    <li>王五</li>
    <li style="color:red">赵六</li>
  </ul> -->
    <div class="root"></div>
  </body>
  <script>
    //规范:
    //  1. 元素名称小写
    //  2. 元素属性 class->className
    //  3. 如果元素没有属性写为null
    let ul = React.createElement(
      'ul',
      { className: 'ul' },
      React.createElement('h2', { className: 'h2' }, '名单'),
      React.createElement('li', null, '张三'),
      React.createElement('li', null, '李四'),
      React.createElement('li', null, '王五'),
      React.createElement(
        'li',
        {
          onClick: function () {
            alert(666);
          },
        },
        '赵六'
      )
    );
    let root = ReactDOM.createRoot(document.querySelector('.root'));
    root.render(ul);
  </script>
</html>
